<template>
  <div class="page dashboard-page">
    <Row class="project-list">
      <Col v-for="project in projects" :key="project._id" span="4">
      <div class="project-item" @click="projectDetail(project)">
        {{project.name}}
      </div>
      </Col>
      <Col span="4" @click="addProject">
      <div class="project-item" @click="addProject">
        新建项目
      </div>
      </Col>
    </Row>
    <!--新建项目弹出框-->
    <Modal :loading="dialog.addProject.loading" v-model="dialog.addProject.visible" title="新建项目" @on-ok="$refs.addProject.submit(dialog.addProject)" @on-cancel="$refs.addProject.reset()">
      <add-project ref="addProject"></add-project>
    </Modal>
  </div>
</template>

<script>
  import AddProject from '/imports/components/project/add-project'
  import { Projects } from '/imports/collections'
  import { mapState } from 'vuex'

  export default {
    name: 'project-list',
    meteor: {
      $subscribe: {
        'projects.user' () {
          return [this.user.id]
        }
      },
      projects () {
        return Projects.find({creator: this.user.id})
      }
    },
    data () {
      return {
        text: 'test',
        projects: [],
        dialog: {
          addProject: {
            visible: false,
            loading: true
          }
        },
        aaa: true
      }
    },
    computed: {
      ...mapState({
        user: state => state.user
      })
    },
    methods: {
      addProject () {
        this.dialog.addProject.visible = true
      },
      projectDetail ({ _id }) {
        console.log(_id)
        this.$router.push({ name: 'project-center', params: { projectId: _id } })
      },
      test () {
        Projects.insert({ name: 'Ulysses', createDate: new Date() }, (...a) => { console.log(a) })
      }
    },
    components: {
      AddProject
    },
    mounted () {}
  }
</script>
<style scoped>
  .project-item {
    border: solid 1px gray;
    padding: 50px 20px;
    text-align: center;
    margin: 5px;
  }

  .project-item:hover {
    background: lightgreen;
    border: 0;
  }

</style>
